<template>
  <div class="zqty_bodys" :style="{'height':(divAutoHeight-120)+'px','width':(divAutoWidth-140)+'px'}">
    <div class="zqty_bodys_content">
      <el-button type="primary" class="queryAllContent" @click="seeAllZqtysmb">查看全文</el-button>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="前缀" name="first">
            <div style="width:99%;border:0px solid red;">
              <el-form :inline="true" :model="dialogList" >
                <el-form-item label="文件标题" style="margin-top:10px;">
                  <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入标题"
                  v-model="HZqtysTemplate.templateTitle"
                  :style="{'width':(divAutoWidth-400)+'px'}">
                </el-input>
                </el-form-item>
              </el-form>
            </div>

          <VueUeditorWrap v-model="HZqtysTemplate.prefix" :config="config"></VueUeditorWrap>
          <el-button type="primary" class="saveContent" @click="insertZqtysmb">保存</el-button>
        </el-tab-pane>
        <el-tab-pane label="单采治疗禁忌症" name="second">
          <VueUeditorWrap v-model="HZqtysTemplate.dczljjz" :config="config"></VueUeditorWrap>
          <el-button type="primary" class="saveContent" @click="insertZqtysmb">保存</el-button>
        </el-tab-pane>
        <el-tab-pane label="UBIO禁忌症" name="thrith">
          <VueUeditorWrap v-model="HZqtysTemplate.ubiojjz" :config="config"></VueUeditorWrap>
          <el-button type="primary" class="saveContent" @click="insertZqtysmb">保存</el-button>
        </el-tab-pane>
        <el-tab-pane label="后缀" name="fourth">
          <VueUeditorWrap v-model="HZqtysTemplate.suffix" :config="config"></VueUeditorWrap>
          <el-button type="primary" class="saveContent" @click="insertZqtysmb">保存</el-button>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        :title="dialogList.dialogSeeAllZqtysmb.title"
        :visible.sync="dialogList.dialogSeeAllZqtysmb.isShow"
        width="70%"
        top="70px"
        :close-on-clcick-modal="false"
        class="dialog-form"
      >
        <el-button type="primary" @click="PrintData" style="float:right;">打印文件</el-button>
        <div id="printData">
          <div style="width:100%;height:40px;line-height:40px;border:0px solid red;font-size:28px;font-family:楷体;text-align:center;"><strong>{{dialogList.dialogSeeAllZqtysmb.templateTitle}}</strong></div>
          <div v-html="dialogList.dialogSeeAllZqtysmb.content"></div>
          <div style="width:100%;height:170px;border:0px solid red;">
              <div class="showSign" style="float:right;width: 340px; height: 160px;border:0px solid black;">
                <div style="width: 340px;height:60px;border:0px solid blue;">
                  <div style="width:150px;height:60px;line-height:60px;float:left;border:0px solid blue;">
                    接收治疗者签字：
                  </div>
                  <div style="width:180px;height:60px;line-height:60px;float:left;border:0px solid black;">
                    <img style="width:180px;height:60px;float:left;" :src="''"/> 
                  </div>
                </div>
                <div style="width: 400px;height:30px;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    患者身份证号：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;">
                     500229199306100913
                  </div>
                </div>
                 <div style="width: 400px;height:30px;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    医生签字：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;">
                     刘贤琼
                  </div>
                </div>
                <div style="width: 400px;height:30px;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    日期：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;">
                     2020年1月16日 
                  </div>
                </div>

            </div>
            <div class="showSign" style="float:right;width: 340px; height: 160px;border:0px solid black;">
                <div style="width: 340px;height:60px;border:0px solid blue;">
                  <div style="width:150px;height:60px;line-height:60px;float:left;">
                    患者授权亲属签名：
                  </div>
                  <div style="width:180px;height:60px;line-height:60px;float:left;">
                    <img style="width:180px;height:60px;float:left;" :src="''"/> 
                  </div>
                </div>
                <div style="width: 340px;height:30px;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    亲属身份证号：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;">
                     500229199306100913
                  </div>
                </div>
                 <div style="width: 340px;height:30px;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    与患者关系：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;">
                     兄弟
                  </div>
                </div>
                <div style="width: 340px;height:30px;border:0px solid black;">
                  <div style="width:150px;height:30px;line-height:30px;float:left;">
                    日期：
                  </div>
                  <div style="width:180px;height:30px;line-height:30px;float:left;;">
                      2020年1月16日
                  </div>
                </div>

            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import baseApi from "plugins/axios/baseApi.js";
import api from "plugins/axios/api.js";
import qualitySystemApi from "plugins/axios/qualitySystemApi.js";
import pdf from "vue-pdf";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  data() {
    return {
      activeName: "first",
      HZqtysTemplate: {
        templateTitle: "",//文件标题
        prefix: '',
        dczljjz: "",
        ubiojjz: '',
        suffix: ""
      },
      dialogList: {
        dialogSeeAllZqtysmb: {
          title: "知情同意书模板：",
          templateTitle: "",
          isShow: false,
          content: "",
          data: ""
        }
      },
      config: {
        autoHeightEnabled: false,
        initialFrameHeight: 500,
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        autoFloatEnabled: true, //是否工具栏可浮动
        initialContent: "请输入内容", //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        BaseUrl: "",
        serverUrl: `${process.env.VUE_APP_API_HOST}/mh/ueditor/config`,
        UEDITOR_HOME_URL: "/ueditor/"
      }
    };
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    },
    divAutoHeight(){
      return this.$store.state.clientHeight;
    },
    divAutoWidth(){
      return this.$store.state.clientWidth-100;

    },
  },
  created() {
    let self = this;
    self.init();
  },
  components: {
    quillEditor,
    VueUeditorWrap
  },
  methods: {
    init() {
      let self = this;
      self.queryZqtysmb();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    insertZqtysmb() {
      let self = this;
      
      api.insertZqtysmb(self.HZqtysTemplate).then(res => {
        if(res != null){
          if(res.statusCode == 200){
              this.$message(res.desc);
          }else{
            this.$message.error(res.content);
          }
          
        }else{
          this.$message("服务器异常返回");
        }
      });
    },
    queryZqtysmb() {
      let self = this;

      api.queryZqtysmb().then(res => {
        if (res != null && res.content != null && res.content != undefined) {
          self.HZqtysTemplate = res.content;
          self.dialogList.dialogSeeAllZqtysmb.templateTitle = res.content.templateTitle;
          self.dialogList.dialogSeeAllZqtysmb.content = self.appenDataForSeeAllZqtysmb(
            res.content
          );
          // this.$message("成功！");
        } else {
          this.$message("失败！");
        }
      });
    },
    //查看全文知情同意书模板
    seeAllZqtysmb() {
      let self = this;
      self.dialogList.dialogSeeAllZqtysmb.isShow = true;
      api.queryZqtysmb().then(res => {
        if (res != null && res.content != null && res.content != undefined) {
          self.dialogList.dialogSeeAllZqtysmb.data = res.content;
          self.dialogList.dialogSeeAllZqtysmb.content = self.appenDataForSeeAllZqtysmb(
            res.content
          );
          // this.$message("成功！");
        } else {
          this.$message("失败！");
        }
      });
    },
    //拼接返回值
    appenDataForSeeAllZqtysmb(data) {
      return (
        "<div>" +
        data.prefix +
        "</div>" +
        "<div>" +
        data.dczljjz +
        "</div>" +
        "<div>" +
        data.ubiojjz +
        "</div>" +
        "<div>" +
        data.suffix +
        "</div>"
      );
    }
  }
};
</script>
<style>
.zqty_bodys {
  background: white;
  box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.3);
}
.zqty_bodys_content {
  width: 96%;
  height: 97%;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
}
.queryAllContent {
  position: absolute;
  right: 40px;
  z-index: 2;
}
.saveContent {
  float: right;
  margin-top: 20px;
}
.qlAlignCenter {
  text-align: center;
  color: red;
}
.qlAlignRight {
  float: right;
}
.showSign {
  float: right;
  /* right: 40px; */
  /* border: 1px solid red; */
  
}

</style>

